doctype html
html(lang="zh-CN")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title 错误提示
    style.
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background-color: #f8f9fa;
        margin: 0;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
      }
      .error-container {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 30px;
        max-width: 600px;
        width: 100%;
      }
      .error-header {
        text-align: center;
        margin-bottom: 30px;
      }
      .error-code {
        font-size: 48px;
        color: #dc3545;
        margin: 0;
      }
      .error-message {
        font-size: 24px;
        color: #343a40;
        margin: 10px 0;
      }
      .error-details {
        background-color: #f8f9fa;
        border-radius: 6px;
        padding: 20px;
        margin: 20px 0;
      }
      .error-item {
        margin: 10px 0;
        color: #6c757d;
      }
      .suggestions {
        list-style-type: none;
        padding: 0;
      }
      .suggestion-item {
        margin: 10px 0;
        padding: 10px;
        background-color: #e9ecef;
        border-radius: 4px;
        color: #495057;
      }
      .back-button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        margin-top: 20px;
      }
      .back-button:hover {
        background-color: #0056b3;
      }

  body
    .error-container
      .error-header
        h1.error-code #{code}
        h2.error-message #{message}
      
      .error-details
        .error-item
          strong 请求路径：
          span #{error.path}
        .error-item
          strong 请求方法：
          span #{error.method}
        .error-item
          strong 时间：
          span #{error.timestamp}
      
      .suggestions
        h3 建议操作：
        each suggestion in error.suggestions
          .suggestion-item #{suggestion}
      
      div(style="text-align: center;")
        a.back-button(href="/") 返回首页
